* {
  margin: 0px;
  padding: 0px; }

body, html {
  font-family: 'Arial', 'Miscrosoft yahei';
  height: 100%;
  font-size: 13px;
  width: 100%; }
  body .error-msg, html .error-msg {
    margin: auto;
    color: #ed807c;
    margin-bottom: 5px;
    width: 285px; }

ul, li {
  list-style: none; }

table {
  border-collapse: collapse; }

a {
  text-decoration: none; }

.table {
  display: table; }
  .table .table-cell {
    display: table-cell;
    vertical-align: middle; }

img {
  max-width: 100%; }

.clear:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.left {
  float: left; }

.right {
  float: right; }

.aa {
  width: 10px; }

.banner {
  height: 75px;
  background: #1f262d;
  border: 1px solid #040709;
  font-size: 22px;
  font-weight: bold;
  color: #FFF; }
  .banner > p {
    background: url("../images/logo.png") no-repeat left center;
    padding: 0 0 0 30px;
    width: 185px;
    margin: 0 auto;
    height: 75px;
    line-height: 75px; }
    .banner > p span {
      color: #31aae1;
      font-weight: normal; }

.login-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: url("../images/login-bg.jpg") no-repeat center bottom;
  background-size: cover;
  overflow: hidden; }
  .login-back .table {
    width: 100%;
    height: 100%;
    text-align: center; }
    .login-back .table .login-logo {
      width: 100px;
      display: inline-block;
      vertical-align: middle; }
    .login-back .table .login-title {
      margin-top: 2%;
      color: #fff;
      font-size: 36px; }

.login-box {
  position: absolute;
  top: 40%;
  height: 60%;
  left: 0;
  right: 0; }
  .login-box .head {
    height: 55px;
    line-height: 55px;
    background: #31aae1;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    margin: 0 0 32px 0; }
  .login-box .user-input {
    height: 42px;
    width: 285px;
    margin: 0 auto;
    margin-bottom: 5px;
    border-bottom: solid 1px #99aabb; }
    .login-box .user-input.password-input {
      margin-top: 10px; }
    .login-box .user-input > i {
      width: 42px;
      height: 42px;
      background: url("../images/u_icon.png") no-repeat; }
      .login-box .user-input > i.i-n {
        background-position: 10px -25px; }
      .login-box .user-input > i.i-p {
        background-position: 10px 10px; }
    .login-box .user-input.error {
      border-bottom: solid 1px #ed807c; }
      .login-box .user-input.error > i.i-n {
        background-position: -65px -25px; }
      .login-box .user-input.error > i.i-p {
        background-position: -65px 10px; }
    .login-box .user-input.focus {
      border-bottom: solid 1px #03a9f4; }
      .login-box .user-input.focus > i.i-n {
        background-position: -30px -25px; }
      .login-box .user-input.focus > i.i-p {
        background-position: -30px 10px; }
    .login-box .user-input > input {
      width: 238px;
      height: 42px;
      border: 0px;
      outline: 0px;
      padding: 0 0 0 5px; }
    .login-box .user-input input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px #fff inset; }
  .login-box .margin-top {
    margin-top: 5%; }
  .login-box .login-btn {
    width: 285px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 15px;
    background: #31aae1;
    color: #FFF;
    margin: 0 auto;
    margin-top: 32px;
    display: block;
    border-radius: 6px; }
  .login-box .forget {
    width: 285px;
    color: #a6a6a6;
    margin: 15px auto 0 auto; }
    .login-box .forget > a {
      color: #a6a6a6; }
      .login-box .forget > a:hover {
        color: #31aae1; }
  .login-box .bottom-info {
    position: absolute;
    bottom: 3%;
    left: 0;
    right: 0;
    text-align: center;
    color: #989ea1; }
